@Master['Master'] @Section['Content'] 
        
     
<link href="/content/css/style.default.css" rel="stylesheet">
<link href="/content/css/select2.css" rel="stylesheet" />
        
        <section>
            <div class="mainwrappe">
                  
                <div class="mainpane">
                                      
                    <div class="contentpanel contentpanel-wizard">
                        
                        <div class="row">
                            <div class="col-md-12">
                                <h5 class="lg-title">Setup Wizard</h5>
                                <p class="mb20">Change configuration</p>

                                <!-- PROGRESS WIZARD -->
                                <form method="post" id="progressWizard" class="panel-wizard">
                                    <ul class="nav nav-justified nav-wizard">
                                        <li><a href="#tab1-2" data-toggle="tab"><strong>Step 1:</strong> Basic Info</a></li>
                                        <li><a href="#tab2-2" data-toggle="tab"><strong>Step 2:</strong> Product Info</a></li>
                                        <li><a href="#tab3-2" data-toggle="tab"><strong>Step 3:</strong> Payment</a></li>
                                    </ul>
                                    
                                    <div class="progress progress-xs">
                                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
                                    </div>
                
                                    <div class="tab-content">
                                        
                                        <div class="tab-pane" id="tab1-2">
										
									<div class="row">
                                            <div class="form-group col-md-4">
											<label class="col-sm-4">Smtp Host</label>
                                                <input type="text" class="form-control" placeholder="Name" name="name">
                                            </div>
                                            <div class="form-group col-md-4">
											<label class="col-sm-4">Smtp Port</label>
                                                <input type="email" class="form-control" placeholder="Email" name="email">
                                            </div>
                                            <div class="form-group col-md-4">
											<label class="col-sm-4">Smtp Banner</label>
                                                <input type="url" class="form-control" placeholder="To" name="to">
                                            </div>
                                        </div><!-- row -->
										
										
									<div class="row">
                                            <div class="form-group col-md-4">
											<label class="col-sm-4">Web Host</label>
                                                <input type="text" class="form-control" placeholder="Name" name="name">
                                            </div>
                                            <div class="form-group col-md-4">
											<label class="col-sm-4">Web Port</label>
                                                <input type="email" class="form-control" placeholder="Email" name="email">
                                            </div>
                                            <div class="form-group col-md-4">
											<label class="col-sm-4">Web ListenIP</label>
                                                <input type="url" class="form-control" placeholder="To" name="to">
                                            </div>
                                        </div><!-- row -->
										
                                       </div><!-- tab-pane -->
                                        
                                        <div class="tab-pane" id="tab2-2">
                                            <div class="form-group">
                                                <label class="col-sm-4">Product ID</label>
                                                <div class="col-sm-5">
                                                    <input type="text" name="product_id" class="form-control" />
                                                </div>
                                            </div><!-- form-group -->
                                            
                                            <div class="form-group">
                                                <label class="col-sm-4">Product Name</label>
                                                <div class="col-sm-8">
                                                    <input type="text" name="product_name" class="form-control" />
                                                </div>
                                            </div><!-- form-group -->
                                            
                                            <div class="form-group">
                                                <label class="col-sm-4">Category</label>
                                                <div class="col-sm-4">
                                                    <select class="width100p" data-placeholder="Choose One">
                                                        <option value="">Choose One</option>
                                                        <option value="">3D Animation</option>
                                                        <option value="">Web Design</option>
                                                        <option value="">Software Engineering</option>
                                                    </select>
                                                </div>
                                            </div><!-- form-group -->
                                        </div><!-- tab-pane -->
                                        
                                        <div class="tab-pane" id="tab3-2">
                                            <div class="form-group">
                                                <label class="col-sm-4">Card No</label>
                                                <div class="col-sm-8">
                                                    <input type="text" name="cardno" class="form-control" />
                                                </div>
                                            </div><!-- form-group -->
                      
                                            <div class="form-group">
                                                <label class="col-sm-4">Expiration</label>
                                                <div class="col-sm-4">
                                                    <select class="width100p" data-placeholder="Month">
                                                        <option value="">Choose One</option>
                                                        <option value="">January</option>
                                                        <option value="">February</option>
                                                        <option value="">March</option>
                                                        <option value="">...</option>
                                                    </select>
                                                </div>
                                                <div class="col-sm-4">
                                                    <select class="width100p" data-placeholder="Year">
                                                        <option value="">Choose One</option>
                                                        <option value="">2013</option>
                                                        <option value="">2014</option>
                                                        <option value="">2015</option>
                                                        <option value="">...</option>
                                                    </select>
                                                </div>
                                            </div><!-- form-group -->
                      
                                            <div class="form-group">
                                                <label class="col-sm-4">CSV</label>
                                                <div class="col-sm-4">
                                                    <input type="text" name="csv" class="form-control" />
                                                </div>
                                            </div><!-- form-group -->
                                        </div><!-- tab-pane -->
                                    </div><!-- tab-content -->
                
                                    <ul class="list-unstyled wizard">
                                        <li class="pull-left previous"><button type="button" class="btn btn-default">Previous</button></li>
                                        <li class="pull-right next"><button type="button" class="btn btn-primary">Next</button></li>
                                        <li class="pull-right finish hide"><button type="submit" class="btn btn-primary">Finish</button></li>
                                    </ul>
                                    
                                </form><!-- panel-wizard -->
              
                            </div><!-- col-md-6 -->
                            
                        </div><!-- row -->
    
                    </div><!-- contentpanel -->
                    
                </div><!-- mainpanel -->
            </div><!-- mainwrapper -->
        </section>

        <script src="/content/js/bootstrap-wizard.min.js"></script>
        <script src="/content/js/jquery.validate.min.js"></script>
        <script src="/content/js/select2.min.js"></script>

        
        <script>
            jQuery(document).ready(function() {
                
                // This will empty first option in select to enable placeholder
                jQuery('select option:first-child').text('');
                
                // Select2
                jQuery("select").select2({
                    minimumResultsForSearch: -1
                });
                
                // Basic Wizard
                jQuery('#basicWizard').bootstrapWizard({
                    onTabShow: function(tab, navigation, index) {
                        tab.prevAll().addClass('done');
                        tab.nextAll().removeClass('done');
                        tab.removeClass('done');
                        
                        var $total = navigation.find('li').length;
                        var $current = index + 1;
                        
                        if($current >= $total) {
                            $('#basicWizard').find('.wizard .next').addClass('hide');
                            $('#basicWizard').find('.wizard .finish').removeClass('hide');
                        } else {
                            $('#basicWizard').find('.wizard .next').removeClass('hide');
                            $('#basicWizard').find('.wizard .finish').addClass('hide');
                        }
                    }
                });
                
                // Progress Wizard
                jQuery('#progressWizard').bootstrapWizard({
                    onTabShow: function(tab, navigation, index) {
                        tab.prevAll().addClass('done');
                        tab.nextAll().removeClass('done');
                        tab.removeClass('done');
                        
                        var $total = navigation.find('li').length;
                        var $current = index + 1;
                        
                        if($current >= $total) {
                            $('#progressWizard').find('.wizard .next').addClass('hide');
                            $('#progressWizard').find('.wizard .finish').removeClass('hide');
                        } else {
                            $('#progressWizard').find('.wizard .next').removeClass('hide');
                            $('#progressWizard').find('.wizard .finish').addClass('hide');
                        }
                        
                        var $percent = ($current/$total) * 100;
                        $('#progressWizard').find('.progress-bar').css('width', $percent+'%');
                    }
                });
                
                // Wizard With Disabled Tab Click
                jQuery('#tabWizard').bootstrapWizard({
                    onTabShow: function(tab, navigation, index) {
                        tab.prevAll().addClass('done');
                        tab.nextAll().removeClass('done');
                        tab.removeClass('done');
                        
                        var $total = navigation.find('li').length;
                        var $current = index + 1;
                        
                        if($current >= $total) {
                            $('#tabWizard').find('.wizard .next').addClass('hide');
                            $('#tabWizard').find('.wizard .finish').removeClass('hide');
                        } else {
                            $('#tabWizard').find('.wizard .next').removeClass('hide');
                            $('#tabWizard').find('.wizard .finish').addClass('hide');
                        }
                    },
                    onTabClick: function(tab, navigation, index) {
                        return false;
                    }
                });
                
                // Wizard With Form Validation
                jQuery('#valWizard').bootstrapWizard({
                    onTabShow: function(tab, navigation, index) {
                        tab.prevAll().addClass('done');
                        tab.nextAll().removeClass('done');
                        tab.removeClass('done');
                        
                        var $total = navigation.find('li').length;
                        var $current = index + 1;
                        
                        if($current >= $total) {
                            $('#valWizard').find('.wizard .next').addClass('hide');
                            $('#valWizard').find('.wizard .finish').removeClass('hide');
                        } else {
                            $('#valWizard').find('.wizard .next').removeClass('hide');
                            $('#valWizard').find('.wizard .finish').addClass('hide');
                        }
                    },
                    onTabClick: function(tab, navigation, index) {
                        return false;
                    },
                    onNext: function(tab, navigation, index) {
                        var $valid = jQuery('#valWizard').valid();
                        if (!$valid) {
                            $validator.focusInvalid();
                            return false;
                        }
                    }
                });
                
                // Wizard With Form Validation
                var $validator = jQuery("#valWizard").validate({
                    highlight: function(element) {
                        jQuery(element).closest('.form-group').removeClass('has-success').addClass('has-error');
                    },
                    success: function(element) {
                        jQuery(element).closest('.form-group').removeClass('has-error');
                    }
                });
                
                
                // This will submit the basicWizard form
                jQuery('.panel-wizard').submit(function() {    
                    alert('This will submit the form wizard');
                    return false // remove this to submit to specified action url
                });

            });
        </script>

@EndSection